<template>
	<view style="padding: 20px; background-color: #c6e2ff; height: 100vh;">
		<view style="background-color: white; border-radius: 5px; padding: 5px;">
			<view style="text-align: center; font-size: 30px">
				预约记录
			</view>
			<u-divider></u-divider>
			<u--form labelPosition="left" :model="appoint" ref="uForm"  labelWidth="100">
				<!-- <u-form-item label="姓名" prop="appoint.name" borderBottom ref="item1">
					<u--input v-model="userInfo.name" border="none"></u--input>
				</u-form-item> -->
				<u-form-item label="老师" prop="tacher" borderBottom @click="showTeacher = true"
					ref="item1">
					<u--input v-model="appoint.teacher" disabled disabledColor="#ffffff" placeholder="请选择老师"
						border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="预约时间" prop="startTime" borderBottom @click="this.$refs.myPicker.show();">
					<u--input v-model="appoint.startTime" disabled disabledColor="#ffffff" placeholder="请选择预约时间"
						border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
			</u--form>
		</view>
		<u-action-sheet
						:show="showTeacher"
						:actions="teachers"
						title="请选择老师"
						@close="showTeacher = false"
						@select="teacherSelect"	>
				</u-action-sheet>
		
		<buuug7-simple-datetime-picker
		      ref="myPicker"
		      @submit="handleSubmit"
		      :start-year="2023"
		      :end-year="2027"
		      :time-hide="[true, true, true, true, true, false]"
		      :time-label="['年', '月', '日', '时', '分', '秒']"
		    />
	

	</view>
</template>

<script>
	export default {
		data() {
			return {
				
				showTeacher:false,
				showTime:false,
				appoint: {
					startTime:''
				},
				teachers:[
					{
						id:'1',
						name:'张三'
					},
					{
						id:'2',
						name:'李四'
					},
				]
			}
		},
		
		methods: {
			handleSubmit(e){
				this.appoint.startTime=`${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}`;
				this.$refs.myPicker.hide();
				console.log(this.appoint)
			},
			// timeConfirm(e){
			// 	var text=uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM');
			// 	this.appoint.startTime=text
			// 	this.showTime=false
			// 	console.log(this.appoint)
			//  },
			teacherSelect(teacher){
				console.log(teacher)
				this.appoint.teacherId=teacher.id
				this.appoint.teacher=teacher.name
			}
		}
	}
</script>

<style>

</style>